<template>
    <div class="tasklist">
        <div style="display: flex;align-items: center;">
            <h5>年级：</h5>
            <el-select v-model="data.gradeLevel" placeholder="年级" size="large" style="width: 240px;margin:0 10px;"
                filterable clearable>
                <el-option label="请选择" value="" />
                <el-option v-for="item in slevel" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" size="large" @click="getList">查询</el-button>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="Id" />
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="grade" label="学级" />
            <el-table-column prop="createUserName" label="发送人" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="change(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="dele(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="display: flex; align-items: center;height: 60px;">
        <span>共{{ total }}条</span>
        <div style="margin: 0 20px;">
            <el-select v-model="data.pageSize" placeholder="Select" size="small" style="width: 100px"
                @change="handleSizeChange">
                <el-option v-for="item in psize" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
        </div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
            :current-page="data.pageIndex" :page-sizes="[5, 10, 20, 30, 50]" :page-size="data.pageSize"/>
        <div style="display: flex;width: 150px;justify-content: center;align-items: center;">
            <span style="display: flex;width: 60px;justify-content: center;align-items: center;">前往</span><el-input
                v-model.lazy="data.pageIndex" class="center-input" style="width: 50px;" /><span
                style="margin-left: 15px;">页</span>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { get, del } from "@/api/task"
import type { AxiosResponse } from 'axios';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
const data = ref({
    gradeLevel: null,
    pageIndex: 1,
    pageSize: 10
})
function getList() {
    get(data.value).then(res => {
        if (res.status === 200) {
            const resp = res.data.response.list.map((i: any) => {
                const level = slevel.find(l => l.value == i.gradeLevel)
                const grade = level?.label
                return { ...i, grade }
            })
            tableData.value = resp
            total.value = res.data.response.total
        }
    })
}

let tableData = ref([]);
let total = ref(0)
const psize = ref([
    { label: '共5条', value: 5 },
    { label: '共10条', value: 10 },
    { label: '共20条', value: 20 },
    { label: '共30条', value: 30 },
    { label: '共40条', value: 40 },
    { label: '共50条', value: 50 }
])
const slevel = [
    { label: '一年级', value: 1 },
    { label: '二年级', value: 2 },
    { label: '三年级', value: 3 },
    { label: '四年级', value: 4 },
    { label: '五年级', value: 5 },
    { label: '六年级', value: 6 },
    { label: '初一', value: 7 },
    { label: '初二', value: 8 },
    { label: '初三', value: 9 },
    { label: '高一', value: 10 },
    { label: '高二', value: 11 },
    { label: '高三', value: 12 },
]
const handleCurrentChange = (page: number) => {
    data.value.pageIndex = page
    getList()
}
// 每页条数变化时触发
const handleSizeChange = (size: number) => {
    data.value.pageSize = size
    data.value.pageIndex = 1 // 重置为第一页
    getList()
}
function dele(id: number) {
    del(id).then(res => {
        if (res.status === 200) {
            ElMessage.success('删除成功')
            getList()
        }
    })
}
function change(id: number) {
    router.push({
        path: 'edit',
        query: { id: id }
    })
}
watch(() => data.value.pageIndex, (newValue, oldValue) => {
    if (!newValue) {
        data.value.pageIndex = oldValue
    } else {
        data.value.pageIndex = newValue;
        getList()
    }
});

getList()
onMounted(() => {

})

</script>

<style scoped>
::v-deep .center-input .el-input__inner {
    text-align: center;
}
</style>